<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NotifyX 开发文档</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4361ee;
            --primary-light: #e6f0ff;
            --success-color: #2ecc71;
            --success-light: #e8f5e9;
            --warning-color: #f39c12;
            --warning-light: #fff8e1;
            --error-color: #e74c3c;
            --error-light: #ffebee;
            --text-color: #2d3748;
            --text-light: #4a5568;
            --light-bg: #f8fafc;
            --border-color: #e2e8f0;
            --code-bg: #f1f5f9;
            --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --card-radius: 12px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        body {
			zoom: 0.9;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
            background-color: #f9fafb;
        }
        
        h1, h2, h3, h4 {
            color: var(--text-color);
            margin-top: 1.5em;
            font-weight: 600;
            line-height: 1.3;
        }
        
        h1 {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 1.5rem;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 0.5rem;
        }
        
        h2 {
            font-size: 1.75rem;
            margin-top: 2.5rem;
            margin-bottom: 1rem;
            position: relative;
            padding-left: 1rem;
        }
        
        h2:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.25em;
            height: 1em;
            width: 4px;
            background-color: var(--primary-color);
            border-radius: 2px;
        }
        
        h3 {
            font-size: 1.375rem;
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
        }
        
        p {
            color: var(--text-light);
            margin-bottom: 1.25em;
        }
        
        .demo-section {
            background-color: white;
            padding: 1.5rem;
            border-radius: var(--card-radius);
            margin-bottom: 2rem;
            box-shadow: var(--card-shadow);
            border-top: 4px solid var(--primary-color);
            transition: var(--transition);
        }
        
        .demo-section:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        .demo-buttons {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin: 1.25rem 0;
        }
        
        button {
            padding: 0.625rem 1.25rem;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.875rem;
            font-weight: 500;
            transition: var(--transition);
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        }
        
        button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        .success-btn {
            background-color: var(--success-color);
        }
        
        .warning-btn {
            background-color: var(--warning-color);
        }
        
        .error-btn {
            background-color: var(--error-color);
        }
        
        pre {
            background-color: var(--code-bg);
            padding: 1.25rem;
            border-radius: 8px;
            overflow-x: auto;
            margin: 1.5rem 0;
            tab-size: 4;
            font-size: 0.875rem;
            line-height: 1.5;
            border: 1px solid var(--border-color);
        }
        
        code {
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
            color: #d63384;
            background-color: rgba(214, 51, 132, 0.1);
            padding: 0.2em 0.4em;
            border-radius: 3px;
            font-size: 0.99em;
        }
        
        pre code {
            color: inherit;
            background-color: transparent;
            padding: 0;
            border-radius: 0;
        }
        
        .param-table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.5rem 0;
            font-size: 0.875rem;
            box-shadow: var(--card-shadow);
            border-radius: 8px;
            overflow: hidden;
        }
        
        .param-table th, .param-table td {
            border: 1px solid var(--border-color);
            padding: 0.75rem 1rem;
            text-align: left;
        }
        
        .param-table th {
            background-color: var(--light-bg);
            font-weight: 600;
            color: var(--text-color);
        }
        
        .param-table tr:nth-child(even) {
            background-color: var(--light-bg);
        }
        
        .param-table tr:hover {
            background-color: rgba(67, 97, 238, 0.05);
        }
        
        .note {
            background-color: var(--warning-light);
            padding: 1rem 1.25rem;
            border-left: 4px solid var(--warning-color);
            margin: 1.5rem 0;
            border-radius: 0 6px 6px 0;
            font-size: 0.875rem;
        }
        
        .note strong {
            color: var(--warning-color);
        }
        
        .highlight {
            background-color: rgba(67, 97, 238, 0.1);
            padding: 0.125rem 0.25rem;
            border-radius: 3px;
            font-weight: 500;
        }
        
        @media (max-width: 768px) {
            body {
                padding: 1rem;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            h2 {
                font-size: 1.5rem;
            }
            
            .demo-section {
                padding: 1rem;
            }
            
            .param-table {
                display: block;
                overflow-x: auto;
            }
        }
    </style>
</head>
<body>
    <h1>NotifyX 开发文档</h1>
    
    <p>NotifyX 是一个轻量级的 JavaScript 通知组件库，提供了多种交互式通知组件，包括模态框、消息提示、确认对话框等。</p>
    
    <h2>安装与引入</h2>
        <div class="demo-section">
        <h3>NotifyX下载地址</h3>
        <pre><code>https://gitee.com/mishihao/notify-x</code></pre>
    </div>
    <div class="demo-section">
        <h3>引入NotifyX</h3>
        <pre><code>&lt;!-- 引入 NotifyX --&gt;
&lt;script src="NotifyX.min.js"&gt;&lt;/script&gt;
    </div>
 
    
    <h2>基础用法</h2>
    
    <div class="demo-section">
        <h3>1. 消息提示框 (msgbox)</h3>
        <p>显示一个模态提示框。</p>
        
        <div class="demo-buttons">
            <button onclick="$notify.msgbox('这是一条普通消息')">基本用法</button>
            <button onclick="$notify.msgbox('操作成功', '系统提示', 'success')">带标题和类型</button>
            <button onclick="$notify.info('信息提示')">快捷方法 - info</button>
            <button class="success-btn" onclick="$notify.success('成功提示')">快捷方法 - success</button>
            <button class="warning-btn" onclick="$notify.warning('警告提示')">快捷方法 - warning</button>
            <button class="error-btn" onclick="$notify.error('错误提示')">快捷方法 - error</button>
        </div>
        
        <h4>代码示例</h4>
        <pre><code>// 基本用法
$notify.msgbox('这是一条普通消息');

// 带标题和类型
$notify.msgbox('操作成功', '系统提示', 'success');

// 快捷方法
$notify.info('信息提示');
$notify.success('成功提示');
$notify.warning('警告提示');
$notify.error('错误提示');</code></pre>
        
        <h4>参数说明</h4>
        <table class="param-table">
            <tr>
                <th>参数</th>
                <th>类型</th>
                <th>默认值</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>message</td>
                <td>string</td>
                <td>必填</td>
                <td>消息内容</td>
            </tr>
            <tr>
                <td>title</td>
                <td>string</td>
                <td>'提示'</td>
                <td>标题</td>
            </tr>
            <tr>
                <td>type</td>
                <td>string</td>
                <td>'info'</td>
                <td>类型(info/success/warning/error)</td>
            </tr>
            <tr>
                <td>html</td>
                <td>boolean</td>
                <td>false</td>
                <td>是否解析HTML内容</td>
            </tr>
        </table>
    </div>
    
    <div class="demo-section">
        <h3>2. 顶部消息 (message)</h3>
        <p>在页面顶部显示一条短暂的消息。</p>
        
        <div class="demo-buttons">
            <button onclick="$notify.msg.info('这是一条顶部消息')">基本用法</button>
            <button class="success-btn" onclick="$notify.msg.success('操作成功')">success 类型</button>
            <button class="warning-btn" onclick="$notify.msg.warning('请注意风险')">warning 类型</button>
            <button class="error-btn" onclick="$notify.msg.error('操作失败')">error 类型</button>
            <button onclick="$notify.msg.info('<strong>HTML内容</strong>', true)">自定义HTML内容</button>
        </div>
        
        <h4>代码示例</h4>
        <pre><code>// 基本用法
$notify.msg.info('这是一条顶部消息');

// 不同类型
$notify.msg.success('操作成功');
$notify.msg.warning('请注意风险');
$notify.msg.error('操作失败');

// 自定义HTML内容
$notify.msg.info('&lt;strong&gt;HTML内容&lt;/strong&gt;', true);</code></pre>
        
        <h4>参数说明</h4>
        <table class="param-table">
            <tr>
                <th>参数</th>
                <th>类型</th>
                <th>默认值</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>msg</td>
                <td>string</td>
                <td>必填</td>
                <td>消息内容</td>
            </tr>
            <tr>
                <td>type</td>
                <td>string</td>
                <td>'info'</td>
                <td>类型(info/success/warning/error)</td>
            </tr>
            <tr>
                <td>html</td>
                <td>boolean</td>
                <td>false</td>
                <td>是否解析HTML内容</td>
            </tr>
        </table>
    </div>
    
    <div class="demo-section">
        <h3>3. 确认对话框 (confirm)</h3>
        <p>显示一个确认对话框，支持Promise和回调两种方式。</p>
        
        <div class="demo-buttons">
            <button onclick="demoPromiseConfirm()">Promise 方式</button>
            <button onclick="demoCallbackConfirm()">回调方式</button>
            <button onclick="demoHtmlConfirm()">带HTML内容</button>
        </div>
        
        <h4>代码示例</h4>
        <pre><code>// Promise 方式
$notify.confirm('确定要删除吗？').then(confirmed => {
  if (confirmed) {
    console.log('用户点击了确定');
  } else {
    console.log('用户点击了取消');
  }
});

// 回调方式
$notify.confirm('确定要提交吗？', '确认操作', (confirmed) => {
  if (confirmed) {
    console.log('用户确认提交');
  }
});

// 带HTML内容
$notify.confirm('&lt;strong&gt;确定执行此操作？&lt;/strong&gt;', '警告', null, true);</code></pre>
        
        <h4>参数说明</h4>
        <table class="param-table">
            <tr>
                <th>参数</th>
                <th>类型</th>
                <th>默认值</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>message</td>
                <td>string</td>
                <td>必填</td>
                <td>消息内容</td>
            </tr>
            <tr>
                <td>title</td>
                <td>string</td>
                <td>'确认操作'</td>
                <td>标题</td>
            </tr>
            <tr>
                <td>callback</td>
                <td>function</td>
                <td>null</td>
                <td>回调函数(回调方式使用)</td>
            </tr>
            <tr>
                <td>html</td>
                <td>boolean</td>
                <td>false</td>
                <td>是否解析HTML内容</td>
            </tr>
        </table>
    </div>
    
    <div class="demo-section">
        <h3>4. 通知组件 (notification)</h3>
        <p>显示一个可自定义的通知框，支持多种位置和配置。</p>
        
        <div class="demo-buttons">
            <button onclick="demoBasicNotification()">基本通知</button>
            <button class="success-btn" onclick="demoSuccessNotification()">成功通知</button>
            <button class="warning-btn" onclick="demoWarningNotification()">警告通知</button>
            <button class="error-btn" onclick="demoErrorNotification()">错误通知</button>
            <button onclick="demoPositionNotification()">不同位置</button>
            <button onclick="demoHtmlNotification()">HTML内容</button>
        </div>
        
        <h4>代码示例</h4>
        <pre><code>// 基本通知
$notify.notification({
    title: '通知标题',
    message: '这是一条通知内容',
    type: 'info'
});

// 成功通知
$notify.notification({
    title: '操作成功',
    message: '您的操作已成功完成',
    type: 'success',
    duration: 5000
});

// 不同位置
$notify.notification({
    title: '右下角通知',
    message: '这条通知出现在右下角',
    position: 'bottom-right'
});

// HTML内容
$notify.notification({
    title: 'HTML内容',
    message: '&lt;strong&gt;加粗文本&lt;/strong&gt; 和 &lt;em&gt;斜体文本&lt;/em&gt;',
    html: true
});</code></pre>
        
        <h4>参数说明</h4>
        <table class="param-table">
            <tr>
                <th>参数</th>
                <th>类型</th>
                <th>默认值</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>title</td>
                <td>string</td>
                <td>'通知'</td>
                <td>通知标题</td>
            </tr>
            <tr>
                <td>message</td>
                <td>string</td>
                <td>''</td>
                <td>通知内容</td>
            </tr>
            <tr>
                <td>type</td>
                <td>string</td>
                <td>'info'</td>
                <td>通知类型(info/success/warning/error)</td>
            </tr>
            <tr>
                <td>position</td>
                <td>string</td>
                <td>'top-right'</td>
                <td>显示位置(top-right/top-left/bottom-right/bottom-left)</td>
            </tr>
            <tr>
                <td>duration</td>
                <td>number</td>
                <td>3000</td>
                <td>自动关闭延迟(毫秒)，0表示不自动关闭</td>
            </tr>
            <tr>
                <td>close</td>
                <td>boolean</td>
                <td>true</td>
                <td>是否显示关闭按钮</td>
            </tr>
            <tr>
                <td>html</td>
                <td>boolean</td>
                <td>false</td>
                <td>是否解析HTML内容</td>
            </tr>
        </table>
    </div>
    
    <div class="demo-section">
        <h3>5. iframe 模态框 (iframeModal)</h3>
        <p>显示一个包含iframe的模态框，可用于嵌入网页内容。</p>
        
        <div class="demo-buttons">
            <button onclick="demoIframeModal()">基本用法</button>
            <button onclick="demoDraggableIframe()">可拖拽</button>
            <button onclick="demoResizableIframe()">可调整大小</button>
        </div>
        
        <h4>代码示例</h4>
        <pre><code>// 基本用法
$notify.iframe({
    url: 'https://example.com',
    title: '网页预览'
});

// 可拖拽
$notify.iframe({
    url: 'https://example.com',
    title: '可拖拽窗口',
    draggable: true
});

// 可调整大小
$notify.iframe({
    url: 'https://example.com',
    title: '可调整大小',
    resizable: true,
    width: 800,
    height: 600
});</code></pre>
        
        <h4>参数说明</h4>
        <table class="param-table">
            <tr>
                <th>参数</th>
                <th>类型</th>
                <th>默认值</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>url</td>
                <td>string</td>
                <td>必填</td>
                <td>iframe加载的URL</td>
            </tr>
            <tr>
                <td>title</td>
                <td>string</td>
                <td>'网页预览'</td>
                <td>模态框标题</td>
            </tr>
            <tr>
                <td>width</td>
                <td>number</td>
                <td>980</td>
                <td>模态框宽度(像素)</td>
            </tr>
            <tr>
                <td>height</td>
                <td>number</td>
                <td>650</td>
                <td>模态框高度(像素)</td>
            </tr>
            <tr>
                <td>resizable</td>
                <td>boolean</td>
                <td>false</td>
                <td>是否可调整大小</td>
            </tr>
            <tr>
                <td>draggable</td>
                <td>boolean</td>
                <td>true</td>
                <td>是否可拖拽</td>
            </tr>
        </table>
    </div>
    
    <div class="demo-section">
        <h3>6. HTML 模态框 (modal)</h3>
        <p>显示一个自定义HTML内容的模态框，支持表单提交等功能，使用<b style="color:red;">&lt;notifyx-modal&gt; &lt;/notifyx-modal&gt;</b>标签来创建模态框元素</p>
        
        <div class="demo-buttons">
            <button onclick="demoBasicModal()">基本模态框</button>
            <button onclick="demoFormModal()">表单模态框</button>
            <button onclick="demoCustomButtonsModal()">自定义按钮</button>
        </div>
        
        <notifyx-modal notify-modal="custom">
            <h3>自定义内容</h3>
            <p>这是一个自定义HTML内容的模态框。</p>
            <form id="demo-form">
                <div style="margin-bottom: 15px;">
                    <label for="username">用户名:</label>
                    <input type="text" nx-value="username" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                </div>
                <div style="margin-bottom: 15px;">
                    <label for="email">邮箱:</label>
                    <input type="email" nx-value="email" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                </div>
            </form>
        </notifyx-modal>
        
        <h4>代码示例</h4>
        <pre><code>模态框HTML使用示例
&lt;notifyx-modal notify-modal=&quot;custom&quot; &gt;
    &lt;form id=&quot;demo-form&quot;&gt;
        &lt;div style=&quot;margin-bottom: 15px;&quot;&gt;
            &lt;label for=&quot;username&quot;&gt;用户名:&lt;/label&gt;
            &lt;input type=&quot;text&quot; nx-value=&quot;username&quot; style=&quot;width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;&quot;&gt;
        &lt;/div&gt;
        &lt;div style=&quot;margin-bottom: 15px;&quot;&gt;
            &lt;label for=&quot;email&quot;&gt;邮箱:&lt;/label&gt;
            &lt;input type=&quot;email&quot; nx-value=&quot;email&quot; style=&quot;width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;&quot;&gt;
        &lt;/div&gt;
    &lt;/form&gt;
&lt;/notifyx-modal&gt;
		
// 基本用法
$notify.modal({
    title: '自定义模态框',
    width: 600
});

// 表单模态框
const modal = $notify.modal({
    title: '用户表单',
    modalId: 'custom',
    onSubmit: function() {
        const formData = modal.getFormData();
        console.log('表单数据:', formData);
        $notify.success(`用户名：${formData.username} 邮箱：${formData.email}`);
    }
});

// 自定义按钮文本
$notify.modal({
    title: '自定义按钮',
    submitText: '保存',
    cancelText: '关闭',
    onSubmit: function() {
        $notify.info('保存操作');
    }
});</code></pre>
        
        <h4>参数说明</h4>
        <table class="param-table">
            <tr>
                <th>参数</th>
                <th>类型</th>
                <th>默认值</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>title</td>
                <td>string</td>
                <td>'提示'</td>
                <td>模态框标题</td>
            </tr>
            <tr>
                <td>width</td>
                <td>number|string</td>
                <td>500</td>
                <td>模态框宽度(像素或百分比)</td>
            </tr>
            <tr>
                <td>height</td>
                <td>number|string</td>
                <td>'auto'</td>
                <td>模态框高度(像素或百分比)</td>
            </tr>
            <tr>
                <td>hidden</td>
                <td>boolean</td>
                <td>true</td>
                <td>初始是否隐藏</td>
            </tr>
            <tr>
                <td>submitText</td>
                <td>string</td>
                <td>'确定'</td>
                <td>提交按钮文本</td>
            </tr>
            <tr>
                <td>cancelText</td>
                <td>string</td>
                <td>'取消'</td>
                <td>取消按钮文本</td>
            </tr>
            <tr>
                <td>onSubmit</td>
                <td>function</td>
                <td>null</td>
                <td>提交回调函数</td>
            </tr>
            <tr>
                <td>onCancel</td>
                <td>function</td>
                <td>null</td>
                <td>取消回调函数</td>
            </tr>
            <tr>
                <td>modalId</td>
                <td>string</td>
                <td>null</td>
                <td>指定要显示的HTML内容ID</td>
            </tr>
			<tr>
                <td>show()</td>
                <td>函数</td>
                <td>无</td>
                <td>显示模态框 modal.show();</td>
            </tr>
			<tr>
                <td>hide()</td>
                <td>函数</td>
                <td>无</td>
                <td>隐藏模态框 modal.hide();</td>
            </tr>
			<tr>
                <td>getFormData()</td>
                <td>函数</td>
                <td>无</td>
                <td>获取模态框内表单数据 modal.getFormData();</td>
            </tr>
        </table>
        
        <div class="note">
            <p><strong>注意：</strong>使用HTML模态框时，需要在页面中定义带有 <code class="highlight">notify-modal</code> 属性的HTML元素作为内容源。</p>
        </div>
    </div>
    
    <h2>高级功能</h2>
    
    <div class="demo-section">
        <h3>数据绑定</h3>
        <p>HTML模态框支持简单的数据绑定功能，通过 <code class="highlight">nx-value</code> 属性实现。</p>
        
        <h4>代码示例</h4>
        <pre><code>&lt;div notify-modal="user-form" style="display: none;"&gt;
    &lt;form&gt;
        &lt;input type="text" nx-value="username" placeholder="用户名"&gt;
        &lt;input type="email" nx-value="email" placeholder="邮箱"&gt;
    &lt;/form&gt;
&lt;/div&gt;

&lt;script&gt;
    const modal = $notify.modal({
        title: '用户表单',
        modalId: 'user-form',
        onSubmit: function() {
            const formData = modal.getFormData();
            console.log('表单数据:', formData);
        }
    });
&lt;/script&gt;</code></pre>
    </div>
    
    <div class="demo-section">
        <h3>自定义样式</h3>
        <p>所有组件都支持通过CSS自定义样式。</p>
        
        <h4>代码示例</h4>
        <pre><code>/* 自定义消息框样式 */
.notifyx-modal-content {
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

/* 自定义通知样式 */
.notifyx-notification {
    border-radius: 8px;
    border-left: 5px solid var(--primary-color);
}

/* 自定义按钮样式 */
.notifyx-confirm-btn {
    background-color: #4CAF50 !important;
    font-weight: bold;
}</code></pre>
    </div>
	
<div class="demo-section">
    <h3>7. 表单数据绑定</h3>
    <p>NotifyX 提供了强大的表单数据自动绑定功能，通过 <code>nx-value</code> 属性实现双向绑定。</p>
    
    <div class="demo-buttons">
        <button onclick="demoFormBind()">绑定表单</button>
        <button onclick="demoGetFormData()">获取表单数据</button>
        <button onclick="demoGetAllForms()">获取所有表单</button>
    </div>
    
    <!-- 示例表单 -->
    <div style="margin: 1.5rem 0; padding: 1rem; background: var(--light-bg); border-radius: 8px;">
        <form id="demo-form2">
            <div style="margin-bottom: 1rem;">
                <label>用户名：</label>
                <input type="text" nx-value="username" placeholder="输入用户名" style="width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px;">
            </div>
            <div style="margin-bottom: 1rem;">
                <label>邮箱：</label>
                <input type="email" nx-value="email" placeholder="输入邮箱" style="width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px;">
            </div>
        </form>
    </div>

    <h4>代码示例</h4>
    <pre><code>// 1. 绑定表单（返回表单ID）
const formId = $notify.form.bind('#demo-form2');

// 2. 获取单个表单数据
const formData = $notify.form.get(formId);
console.log(formData); // {username: '输入的值', email: '输入的值'}

// 3. 获取所有已绑定的表单数据
const allForms = $notify.form.all();
console.log(allForms); // {form1: {username: 'xxx', email: 'xxx'}, form2: {...}}

// 4. 在模态框中自动绑定（前提是使用模态框/如果在模态框外获取表单数据则使用上方方法）
const modal = $notify.modal({
    modalId: 'custom-form',
    onSubmit: function() {
        const data = modal.getFormData(); // 直接获取当前模态框表单数据
        $notify.success(`提交数据: ${JSON.stringify(data)}`);
    }
});</code></pre>
    
    <h4>参数说明</h4>
    <table class="param-table">
        <tr>
            <th>方法</th>
            <th>参数</th>
            <th>返回值</th>
            <th>说明</th>
        </tr>
        <tr>
            <td>bind()</td>
            <td>selector (string/HTMLElement)</td>
            <td>string (表单ID)</td>
            <td>绑定带有 <code>nx-value</code> 属性的表单元素</td>
        </tr>
        <tr>
            <td>get()</td>
            <td>formId (string)</td>
            <td>Object</td>
            <td>获取指定表单的键值对数据</td>
        </tr>
        <tr>
            <td>all()</td>
            <td>-</td>
            <td>Object</td>
            <td>获取所有已绑定表单的数据</td>
        </tr>
    </table>

    <div class="note">
        <strong>最佳实践：</strong> 如果在模态框中直接使用 <code>modal.getFormData()</code> 方法更便捷，无需手动绑定。
    </div>
</div>
    
    <script>
        // 演示函数
        function demoPromiseConfirm() {
            $notify.confirm('确定要删除这条数据吗？').then(confirmed => {
                if (confirmed) {
                    $notify.success('数据已删除');
                } else {
                    $notify.info('操作已取消');
                }
            });
        }
        
        function demoCallbackConfirm() {
            $notify.confirm('确定要提交表单吗？', '确认操作', (confirmed) => {
                if (confirmed) {
                    $notify.success('表单已提交');
                }
            });
        }
        
        function demoHtmlConfirm() {
            $notify.confirm('<strong>确定执行此操作？</strong><br><small>此操作不可撤销</small>', '警告', null, true);
        }
        
        function demoBasicNotification() {
            $notify.notification({
                title: '系统通知',
                message: '您有一条新的消息',
                type: 'info'
            });
        }
        
        function demoSuccessNotification() {
            $notify.notification({
                title: '操作成功',
                message: '您的订单已支付成功',
                type: 'success',
                duration: 5000
            });
        }
        
        function demoWarningNotification() {
            $notify.notification({
                title: '警告',
                message: '您的存储空间不足',
                type: 'warning'
            });
        }
        
        function demoErrorNotification() {
            $notify.notification({
                title: '错误',
                message: '无法连接到服务器',
                type: 'error'
            });
        }
        
        function demoPositionNotification() {
            $notify.notification({
                title: '位置演示',
                message: '这条通知出现在左下角',
                position: 'bottom-left'
            });
        }
        
        function demoHtmlNotification() {
            $notify.notification({
                title: 'HTML内容',
                message: '<strong>重要通知</strong>: <span style="color:red;">系统将于今晚维护</span>',
                html: true
            });
        }
        
        function demoIframeModal() {
            $notify.iframe({
                url: 'about:blank',
                title: 'iframe演示'
            });
        }
        
        function demoDraggableIframe() {
            $notify.iframe({
                url: 'about:blank',
                title: '可拖拽窗口',
                draggable: true
            });
        }
        
        function demoResizableIframe() {
            $notify.iframe({
                url: 'about:blank',
                title: '可调整大小',
                resizable: true,
                width: 700,
                height: 500
            });
        }
        
        function demoBasicModal() {
            $notify.modal({
                title: '基本模态框',
                width: 600
            });
        }
        
        function demoFormModal() {
            const modal = $notify.modal({
                title: '用户表单',
                modalId: 'custom',
                onSubmit: function() {
                    const formData = modal.getFormData();
                    console.log('表单数据:', formData);
                    $notify.success(`用户名：${formData.username} 邮箱：${formData.email}`);
                }
            });
        }
        
        function demoCustomButtonsModal() {
            $notify.modal({
                title: '自定义按钮',
                submitText: '保存',
                cancelText: '关闭',
                onSubmit: function() {
                    $notify.info('保存操作');
                }
            });
        }
		
		function demoFormBind() {
        const formId = $notify.form.bind('#demo-form2');
        $notify.success(`表单绑定成功！ID: ${formId}`);
    }
    
    function demoGetFormData() {
        const formId = $notify.form.bind('#demo-form2');
        const data = $notify.form.get(formId);
        $notify.info(`表单数据: ${JSON.stringify(data)}`);
    }
    
    function demoGetAllForms() {
        $notify.form.bind('#demo-form2');
        const allData = $notify.form.all();
        $notify.msgbox(`所有表单数据:<br><pre>${JSON.stringify(allData, null, 2)}</pre>`, '表单数据', 'info', true);
    }
    </script>
    
    <!-- 引入 NotifyX -->
    <script src="NotifyX.min.js"></script>
</body>
</html>